<!DOCTYPE html>
<html>
<head>
    <title>多个大数据量Select示例</title>
    <style>
        .select-container {
            margin: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        select {
            width: 300px;
            height: 30px;
        }
        /* 修改小球容器样式 */
        .ball-container {
            width: 200px;
            height: 60px;  /* 增加高度以便观察小球运动 */
            border: 1px solid #ccc;
            position: relative;
        }
        .ball {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            animation: moveBall 4s linear infinite;
        }
        @keyframes moveBall {
            0% { left: 0; top: 0; }
            25% { left: calc(100% - 20px); top: 0; }
            50% { left: calc(100% - 20px); top: calc(100% - 20px); }
            75% { left: 0; top: calc(100% - 20px); }
            100% { left: 0; top: 0; }
        }
    </style>
</head>
<body>
    <div class="select-container">
        <label>省份选择：</label>
        <select id="provinceSelect"></select>
        <div class="ball-container">
            <div class="ball"></div>
        </div>
    </div>

    <!-- 删除原来的小球容器 -->
    <div class="select-container">
        <label>城市选择：</label>
        <select id="citySelect"></select>
    </div>

    <div class="select-container">
        <label>区域选择：</label>
        <select id="areaSelect"></select>
    </div>

    <!-- 添加动画小球容器 -->

    <script>
        // 模拟生成大量数据
        function generateMockData(prefix, count) {
            return Array.from({ length: count }, (_, i) => ({
                value: i,
                text: `${prefix}-${i}`
            }));
        }

        // 直接加载所有选项（这种方式会导致卡顿）
        function loadAllOptions(selectId, data) {
            const select = document.getElementById(selectId);
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.value;
                option.text = item.text;
                select.appendChild(option);
            });
        }

        // 初始化数据
        const provinceData = generateMockData('省份', 5000);
        const cityData = generateMockData('城市', 8000);
        const areaData = generateMockData('区域', 10000);

        // 加载所有数据（这里会导致明显的卡顿）
        loadAllOptions('provinceSelect', provinceData);
        loadAllOptions('citySelect', cityData);
        loadAllOptions('areaSelect', areaData);
    </script>
     <script src="performance-monitor.js"></script>
     <script>
             const monitor = new PerformanceMonitor({
                 warningThreshold: 30,
                 showPanel: true,
                 historySize: 10,
                 updateInterval: 500,
                 solutionName: '原始方案',
                 onFPSUpdate: ({ fps, avgFps }) => {
                     if (fps < 30) {
                         console.warn(`[原始方案][${new Date().toLocaleTimeString()}] 性能警告: FPS=${fps}`);
                     }
                 }
             });

             document.addEventListener('DOMContentLoaded', () => {
                 monitor.start();
             });
     </script>
</body>
</html>